<template>
  <div class="container">
    <div class="filter-container">
      <!-- <el-select v-model="q.type" class="filter-item" placeholder="请选择类型" clearable>
        <el-option
          v-for="item in dataEleTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <div class="filter-item">
        <el-input v-model="q.code" placeholder="位号" />
      </div>
      <div class="filter-item">
        <el-input v-model="q.itemCode" placeholder="指标编码" />
      </div>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button :disabled="managerConnectionStatus!==1" class="filter-item pull-right" type="default" icon="el-icon-refresh" @click="getValueRealtimePageDataElement">获取实时数据</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="dataElements"
      border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
      style="width: 100%;"
    >
<!--      <el-table-column label="ID" prop="id" align="center" width="60"></el-table-column>-->
      <!--      <el-table-column label="通道ID" prop="portId" align="center" width="90"></el-table-column>-->
      <el-table-column label="位号" prop="code" min-width="100"></el-table-column>
      <el-table-column label="指标编码" prop="itemCode" align="center" min-width="100"></el-table-column>
      <el-table-column label="描述" prop="description" min-width="190"></el-table-column>
      <el-table-column label="数据点类型" align="center" min-width="120px">
        <template slot-scope="{row}">
          {{ transType(row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="数值" prop="value" align="center" min-width="90"></el-table-column>
      <el-table-column label="单位" prop="unit" align="center" min-width="90"></el-table-column>
      <el-table-column label="时间戳" align="center" min-width="190">
        <template slot-scope="scope">
          <span>{{ scope.row.collectTime ? transDate(scope.row.collectTime) : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="质量戳" align="center" min-width="90">
        <template slot-scope="{row}">
          {{ row.quality }}
        </template>
      </el-table-column>
      <el-table-column label="量程上限" prop="rangeLH" align="center" min-width="90"></el-table-column>
      <el-table-column label="量程下限" prop="rangeLL" align="center" min-width="90"></el-table-column>
      <el-table-column label="高高报阈值" prop="majorHighAlarmThreshold" align="center" min-width="120"></el-table-column>
      <el-table-column label="高报阈值" prop="highAlarmThreshold" align="center" min-width="120"></el-table-column>
      <el-table-column label="低报阈值" prop="lowAlarmThreshold" align="center" min-width="120"></el-table-column>
      <el-table-column label="低低报阈值" prop="majorLowAlarmThreshold" align="center" min-width="120"></el-table-column>
    </el-table>
    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page-index.sync="q.page"
      :page-size.sync="q.size"
      @pagination="handleSearch"
    />
  </div>
</template>

<script>
  import { getValuePageDataElement, getValueRealtimePageDataElement } from "@/api/dataElement";
  import { dataEleTypeOptions } from '@/utils/enums.js';
  import Pagination from "@/components/Pagination";
  import moment from "moment";

  export default {
    components: {
      'pagination': Pagination
    },
    props: {
      equipment: {
        type: Object,
        'default': {}
      },
      managerConnectionStatus: {
        type: Number,
        default: undefined
      }
    },
    data() {
      return {
        dataEleTypeOptions,
        isSubmitLoading: false,
        downloadLoading: false,
        tableLoading: false,
        tableKey: 0,
        dataElements: [],
        q: {
          gatewayId: undefined,
          portId: undefined,
          equipId: undefined,
          itemCode: undefined,
          code: undefined,
          page: 1,
          size: 10,
          type: undefined
        },
        totalCount: 0,
        timer: undefined
      };
    },
    computed: {},
    watch: {
      'equipment.id': function(newVal) {
        this.q.gatewayId = this.equipment.gatewayId;
        this.q.portId = this.equipment.portId;
        this.q.equipId = newVal;
        this.q.page = 1;
        this.getValuePageDataElement(this.q.gatewayId);
      }
    },
    created() {
      this.setInterval();
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      setInterval() {
        this.timer = setInterval(() => {
          this.getValuePageDataElement(this.q.gatewayId);
        }, 5000);
      },
      handleSearch() {
        this.getValuePageDataElement(this.q.gatewayId);
      },
      getValuePageDataElement(gatewayId) {
        this.q.gatewayId = gatewayId;
        this.tableLoading = true;
        // 根据id查询某个通道信息
        getValuePageDataElement(this.q).then(result => {
          this.dataElements = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      getValueRealtimePageDataElement() {
        this.tableLoading = true;
        // 根据id查询某个通道信息
        getValueRealtimePageDataElement(this.q).then(result => {
          this.dataElements = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      transType(type) {
        let returnVal = '';
        switch (type) {
          case 1:
            returnVal = '模拟量';
            break;
          case 2:
            returnVal = '开关量';
            break;
          case 3:
            returnVal = '其他';
            break;
        }
        return returnVal;
      },
      transDate(timestamp) {
        return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.quality && row.quality > 0) {
          return 'danger-row';
        }
        return '';
      }
    }
  };
</script>

<style lang="scss">
  .full-container {
    min-height: calc(100vh - 50px);
  }
  .el-table .danger-row {
    color: #F56C6C!important;
  }
</style>
